<template>
    <div>
        <el-form  @submit.native.prevent ref="formFileds" :model="formFileds" label-width="auto">
            <el-row :gutter="24">
                <el-col :span="7">
                    <el-form-item label="年份" prop="date">
                        <div style="display:flex">
                            <el-input type="text" v-model="formFileds.date" placeholder="请输入   例：2022 / 202201"
                                @keyup.enter.native="search()"></el-input>
                            <el-button type="primary" @click="search()">查询</el-button>
                        </div>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="7">
                    <el-form-item label="案件类型" prop="ajlx">
                        <div style="display:flex">
                            <el-select v-model="formFileds.ajlx" clearable>
                                <el-option label="个人" value="个人"></el-option>
                                <el-option label="企业机构" value="企业机构"></el-option>
                                <el-option label="司法机构" value="司法机构"></el-option>
                            </el-select>
                            <el-button type="primary" @click="search()">查询</el-button>
                        </div>
                    </el-form-item>
                </el-col> -->
                <el-col :span="11">
                    <el-form-item label-width="0">
                        <el-button type="primary" @click="budgetview(null)">添加</el-button>
                        <el-button type="primary" @click="download" class="margin-l-25">导出</el-button>
                        <el-button type="primary" @click="upexcel" class="margin-l-25">导入</el-button>
                        <div style="display:inline-block">
                            <el-upload class="upload-demo" ref="upload" action="/api/ysgl/import" :file-list="fileList"
                                :on-success="handleSuccess" accept=".xls,.xlsx" :limit="1">
                            </el-upload>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%;" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" :span-method="arraySpanMethod" :summary-method="getSummaries"
            show-summary>
            <el-table-column :label="title" style="font-size:18px">
                <el-table-column prop="date" label="月份"></el-table-column>
                <el-table-column prop="type" label="案件类型"></el-table-column>
                <el-table-column prop="yajsl" label="案件数量">
                </el-table-column>
                <el-table-column prop="yajsr" label="实收金额">
                </el-table-column>
                <el-table-column prop="yysje" label="应收金额">
                </el-table-column>
                <el-table-column prop="ypjajdj" label="平均案件单价">
                </el-table-column>
                <el-table-column prop="yajcb" label="案件成本">
                </el-table-column>
                <el-table-column prop="yajml" label="案件毛利">
                </el-table-column>
                <el-table-column prop="yajmll" label="案件毛利率">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="budgetview(scope.row)">编辑</el-button>
                        <el-button type="text" style="color:red" @click="rowDel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <BudgetShow ref="budgetShow" v-if="budgetShow" :budgetShow="budgetShow" :record="budgetForm" :year="title"
            :action="addoredit" @dialogClose="dialogClose" @gettable="gettable" :tableData="tableData"></BudgetShow>
    </div>
</template>
 
<script>
import BudgetShow from './budgetShow.vue';
import { getAll, getList, del, sort } from '@/api/financialManagement/budget';
export default {
    name: "BudgetManagement",
    components: {
        BudgetShow
    },
    data () {
        return {
            formFileds: {
                date: '',
                ajlx: '',
            },
            title: '',
            dateOptions: [],
            tableData: [],
            arrmonth: [],
            monthOptions: [],
            budgetShow: false,
            budgetForm: {},
            spanArr: [],
            addoredit: '',
            fileList: [],
        }

    },
    setup () {
    },
    methods: {
        mergeTable () {
            var index
            this.spanArr = []
            for (let i = 0; i < this.tableData.length; i++) {
                if (i == 0) {
                    this.spanArr.push(1)
                    index = 0
                } else {
                    if (this.tableData[i].date == this.tableData[i - 1].date) {
                        this.spanArr[index] += 1
                        this.spanArr.push(0)
                    } else {
                        this.spanArr.push(1)
                        index = i
                    }
                }
            }
        },
        arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                const _row = this.spanArr[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return [_row, _col]
            }
        },
        getSummaries (param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (index == 5) {
                    if (sums[3] != 0 && sums[2] != 0) {
                        sums[index] = (sums[3] / sums[2]).toFixed(2)
                    } else {
                        sums[index] = ''
                    }

                } else if (index == 8) {
                    if (sums[7] != 0 && sums[3] != 0) {
                        sums[index] = (sums[7] / sums[3] * 100).toFixed(2) + '%'
                    } else {
                        sums[index] = ''
                    }

                } else {
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' ';
                    } else {
                        sums[index] = '';
                    }
                }

            });

            return sums;
        },
        download () {
            window.location.href = "api/ysgl/export?input=" + this.title.substring(0, 4);
        },
        handleSuccess (file, fileList) {
            fileList = []
            this.fileList = []
        },
        upexcel () {
            this.$confirm("导入已存在年份的文件将覆盖原来的文件", "导入excel文件", {
                comfirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.$refs['upload'].$refs['upload-inner'].handleClick()
                return true
            }).catch(() => {
                return false
            })
        },
        search () {
            if (this.formFileds.date.length >= 4) {
                if (this.formFileds.date) {
                    var par;
      par = {
                    getList('input=' + this.formFileds.date).then((res) => {
                        this.title = this.formFileds.date + '预算管理'
                        this.tableData = res.data
                    })
                } else {
                    let nowDate = new Date()
                    let year = nowDate.getFullYear()
                    this.title = year + '预算管理'
                    getList('input=' + year).then((res) => {
                        this.tableData = res.data
                    })
                }
            } else {
                return
            }

        },
        gettable () {
            var year
            if (this.title) {
                year = this.title.substring(0, 4)
                getList('input=' + year).then((res) => {
                    this.tableData = res.data
                    this.mergeTable()
                })
            } else {
                let nowDate = new Date()
                year = nowDate.getFullYear()
                this.title = year + '预算管理'
                getList('input=' + year).then((res) => {
                    this.tableData = res.data
                    this.mergeTable()
                })
            }
        },

        dialogClose () {
            this.budgetShow = false
        },
        budgetview (row) {
            this.budgetShow = true
            if (row == null) {
                this.addoredit = 'add'
            } else {
                this.budgetForm = row
                this.addoredit = 'edit'

            }
        },
        rowDel (id) {
            this.$confirm("确定要删除当前行吗？", "删除", {
                comfirmButtonText: "确定",
                cancelButtonText: "取消",
            }).then(() => {
                del('id=' + id).then((res) => {
                    this.gettable()
                })
            });
        }
    },
    mounted () {
        this.gettable()
    }
};
</script>

<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}

.el-form-item {
    padding: 0 10px;
}

/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

/deep/ input[type='number'] {
    -moz-appearance: textfield;
}

.upload-demo {
    display: flex;
}

/deep/ .el-table__footer-wrapper tbody td.el-table__cell {
    text-align: center;
}

</style>
